<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>用户管理</title>

    <!-- Bootstrap core CSS -->
    <link th:href="@{/webjars/bootstrap/4.3.1/css/bootstrap.css}" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link th:href="@{/asserts/css/dashboard.css}" rel="stylesheet">
    <!-- 通知栏样式 -->
    <link th:href="@{/asserts/css/notificationBar.css}" rel="stylesheet">
</head>

<!-- 页面加载完毕就同步通知栏，如果有新通知要及时通知用户 -->
<body onload="syncNotify()">
<!-- 引入顶部栏 -->
<div th:replace="common/bar::topbar"></div>

<div class="container-fluid">
    <div class="row">
        <!-- 引入通知栏 -->
        <div th:replace="common/bar::NotificationBar"></div>

        <!-- 引入侧边栏 -->
        <div th:replace="common/bar::#sidebar(activeUri='userman')"></div>

        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
            <h2 th:if="${session.login_usr_role == 0}">用户管理 | <a class="btn btn-sm btn-success"
                                                              onclick="return userAddView()">用户添加</a></h2>

            <div class="table-responsive" style="overflow:auto;">
                <table class="table table-striped table-sm" style='white-space: nowrap'>
                    <thead>
                    <tr align="center">
                        <th>#</th>
                        <th>用户名</th>
                        <th>角色</th>
                        <th>昵称</th>
                        <th>联系电话</th>
                        <th>冻结</th>
                        <th>启用</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="u : ${user_pages.getRecords()}" align="center">
                        <td th:text="${u.uid}"></td>
                        <td th:text="${u.username}"></td>
                        <td th:text="${u.role} == 0 ? '超级用户' : (${u.role} == 1 ? '管理员' : '普通用户')"></td>
                        <td th:text="${u.uinfo.nickname}"></td>
                        <td th:text="${#strings.isEmpty(u.uinfo.phone) ? '无' : u.uinfo.phone}"></td>
                        <td th:text="${u.locked} == 0 ? '是' : '否'"></td>
                        <td th:text="${u.enabled} == 0 ? '否' : '是'"></td>
                        <td>
                            <a class="btn btn-sm btn-primary" href="#"
                               th:onclick="'return userEditView(' + ${u.uid} + ')'">编辑</a>
                            <button href="#" class="btn btn-sm btn-danger deleteBtn"
                                    th:onclick="'return userRemove(' + ${u.uid} + ')'">删除</button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div>
                <!-- 查询限制 -->
                <table align="left" width="27%">
                    <tr>
                        <td>
                            查看
                            <input type="radio" name="onlyRole_radio" onchange="return onlyRoleChange()" value="-1"
                                   th:checked="${search_onlyRole == -1} ? 'checked'" th:if="${session.login_usr_uid == 0}" th:text="所有" />

                            <input type="radio" name="onlyRole_radio" onchange="return onlyRoleChange()" value="0"
                                   th:checked="${search_onlyRole == 0} ? 'checked'" th:if="${session.login_usr_uid == 0}" th:text="超级用户" />

                            <input type="radio" name="onlyRole_radio" onchange="return onlyRoleChange()" value="1"
                                   th:checked="${search_onlyRole == 1} ? 'checked'" th:text="管理员" />

                            <input type="radio" name="onlyRole_radio" onchange="return onlyRoleChange()" value="2"
                                   th:checked="${search_onlyRole == 2} ? 'checked'" th:text="普通用户" />
                        </td>
                    </tr>
                </table>
                <!-- 分页控制区域 -->
                <table align="right" width="73%">
                    <tr th:if="${user_pages.pages == 0}">
                        <td align="center">
                            [没有数据]
                        </td>
                    </tr>
                    <tr th:if="${user_pages.pages > 0}">
                        <!-- 选择一页能显示多少 -->
                        <td align="center">
                            请选择分页大小[默认10/最大500]
                            <input type="text" name="page_size"
                                   oninput="value=value.replace(/[^\d]/g,'')" th:value="${user_pages.size}" size="3">
                            <button th:onclick="'showPage(1, ' +  ${user_pages.pages} + ', ' + ${search_onlyRole} + ')'">立即生效</button>
                        </td>
                        <td align="center">
                            <th:block th:text="'第' + ${user_pages.current} + '/' + ${user_pages.pages} + '页'"></th:block>
                        </td>
                        <th:block th:if="${user_pages.current > 1}">
                            </td>
                            <td align="center">
                                <a href="javascript:void(0)" th:onclick="'showPage(1' + ', ' +  ${user_pages.pages} + ', ' + ${search_onlyRole} + ')'">[首页]</a>
                            </td>
                            <td align="center">
                                <a href="javascript:void(0)" th:onclick="'showPage(' + ${user_pages.current - 1} + ', ' +  ${user_pages.pages} + ', ' + ${search_onlyRole} + ')'">[上一页]</a>
                            </td>
                        </th:block>

                        <td align="center">
                            <!-- 动态显示条 -->
                            <th:block th:each="i : ${#numbers.sequence(user_pages.dynamicStart, user_pages.dynamicEnd)}">
                                <th:block th:if="${i == user_pages.current}" th:text="'[' + ${i} + ']'"></th:block>
                                <a th:if="${i != user_pages.current}" href="javascript:void(0)" th:onclick="'showPage(' + ${i} + ', ' +  ${user_pages.pages} + ', ' + ${search_onlyRole} + ')'">
                                    [<th:block th:text="${i}"></th:block>]
                                </a>
                            </th:block>
                        </td>

                        <th:block th:if="${user_pages.current < user_pages.pages}">
                            <td align="center">
                                <a href="javascript:void(0)" th:onclick="'showPage(' + ${user_pages.current + 1} + ', ' +  ${user_pages.pages} + ', ' + ${search_onlyRole} + ')'">[下一页]</a>
                            </td>
                            <td align="center">
                                <a href="javascript:void(0)" th:onclick="'showPage(' + ${user_pages.pages} + ', ' +  ${user_pages.pages} + ', ' + ${search_onlyRole} + ')'">[尾页]</a>
                            </td>
                        </th:block>
                    </tr>
                </table>
                <br>
                <br>
                <br>
            </div>
        </main>
    </div>
</div>

<!-- 引入公共的js  -->
<div th:replace="common/js::js"></div>
<!-- 自定义的js -->
<script type="text/javascript" th:src="@{/asserts/js/common.js}" ></script>
<script type="text/javascript" th:src="@{/asserts/js/user.js}" ></script>

</body>
</html>